<template>
    <el-card shadow="never" style="border: 0;">
        <yun-form
                :data="row"
                ref="yunForm"
                :tabs="tabs[rules_type_value]"
                :columns="columns[rules_type_value]">
                <template #default>
                    {:token_field()}
                </template>
                <template #mode="{rows}">
                    <el-form-item label="收费规则:" required>
                        <Fieldlist :label='["选择收费模式，排在靠前的权重越大"]' :keys='["mode_id"]' :value="rows.mode" @change="changeMode">
                            <template #mode_id="{list,row,key}">
                               <el-select v-model="list[row][key]" style="width: 100%" placeholder="请选择">
                                    <el-option v-for="(mode,name) in parking_mode" :value="name" :label="mode">{{mode}}</el-option>
                               </el-select>
                            </template>
                        </Fieldlist>
                    </el-form-item>
                </template>
                <template #gifts="{rows}">
                    <el-form-item label="充值赠送:">
                        <Fieldlist :label='["充值金额","赠送金额"]' :keys='["recharge_fee","gift_fee"]' @change="changeGifts" :value="rows.gifts || null">
                            <template #recharge_fee="{list,row}">
                                <el-input type="number" v-model="list[row].recharge_fee">
                                    <template #append>元</template>
                                </el-input>
                            </template>
                            <template #gift_fee="{list,row}">
                                <el-input type="number" v-model="list[row].gift_fee">
                                    <template #append>元</template>
                                </el-input>
                            </template>
                        </Fieldlist>
                    </el-form-item>
                </template>
                <template #online_apply_remark="{rows}">
                    <el-form-item label="申请月卡备注:" v-if="rules_type_value=='monthly'">
                        <Fieldlist :label='["备注项目","备注类型"]' :keys='["remark","type"]' @change="changeMonthRemark" :value="rows.online_apply_remark || null">
                            <template #type="{list,row}">
                                <el-select v-model="list[row].type" placeholder="请选择">
                                    <el-option label="文本" value="txt"></el-option>
                                    <el-option label="照片" value="image"></el-option>
                                </el-select>
                            </template>
                        </Fieldlist>
                    </el-form-item>
                    <el-form-item label="申请日租卡备注:" v-if="rules_type_value=='day'">
                        <Fieldlist :label='["备注项目","备注类型"]' :keys='["remark","type"]' @change="changeMonthRemark" :value="rows.online_apply_remark || null">
                            <template #type="{list,row}">
                                <el-select v-model="list[row].type" placeholder="请选择">
                                    <el-option label="文本" value="txt"></el-option>
                                    <el-option label="照片" value="image"></el-option>
                                </el-select>
                            </template>
                        </Fieldlist>
                    </el-form-item>
                    <el-form-item label="申请储值卡备注:" v-if="rules_type_value=='stored'">
                        <Fieldlist :label='["备注项目","备注类型"]' :keys='["remark","type"]' @change="changeMonthRemark" :value="rows.online_apply_remark || null">
                            <template #type="{list,row}">
                                <el-select v-model="list[row].type" placeholder="请选择">
                                    <el-option label="文本" value="txt"></el-option>
                                    <el-option label="照片" value="image"></el-option>
                                </el-select>
                            </template>
                        </Fieldlist>
                    </el-form-item>
                </template>
                <template #online_renew_remark="{rows}">
                    <el-form-item label="申请续费备注:">
                        <Fieldlist :label='["备注项目","备注类型"]' :keys='["remark","type"]' @change="changeRenewRemark" :value="rows.online_renew_remark || null">
                            <template #type="{list,row}">
                                <el-select v-model="list[row].type" placeholder="请选择">
                                    <el-option label="文本" value="txt"></el-option>
                                    <el-option label="照片" value="image"></el-option>
                                </el-select>
                            </template>
                        </Fieldlist>
                    </el-form-item>
                </template>
                <template #remark_list="{rows}">
                    <el-form-item label="添加备注资料:">
                        <Fieldlist :label='["备注项目","备注类型"]' :keys='["remark","type"]' @change="changeRemarkList" :value="rows.remark_list || null">
                            <template #type="{list,row}">
                                <el-select v-model="list[row].type" placeholder="请选择">
                                    <el-option label="文本" value="txt"></el-option>
                                    <el-option label="照片" value="image"></el-option>
                                </el-select>
                            </template>
                        </Fieldlist>
                    </el-form-item>
                </template>
                <template #time_limit_setting="{rows}">
                    <el-form-item label="限制时间:" prop="period_fee">
                        <Fieldlist :label='["时间区间"]' :keys='["period_begin","period_end"]' :value="rows.time_limit_setting" @change="changePeriod">
                            <template #period="{list,row}">
                                <div class="row">
                                    <el-input v-model="list[row].period_begin" type="text"></el-input><el-input v-model="list[row].period_end" type="text"></el-input>
                                </div>
                            </template>
                        </Fieldlist>
                    </el-form-item>
                </template>
        </yun-form>
    </el-card>
</template>
<script>
    import form from "@components/Form.js";
    import fieldlist from "@components/Fieldlist.js";
    import selectpage from "@components/SelectPage.js";
    export default{
        components:{
            'YunForm':form,
            'Fieldlist':fieldlist,
            'Selectpage':selectpage,
        },
        data:{
            rules_type_tabs:Yunqi.data.rules_type_tabs,
            rules_type_value:Yunqi.data.rules_type_value,
            parking_mode:Yunqi.data.parking_mode,
            tabs:{
                provisional:null,
                monthly:['基本资料','申请月卡','在线续租','过期续租'],
                day:['基本资料','申请日租卡','申请续卡'],
                member:null,
                stored:['基本资料','线上申请'],
                vip:null
            },
            columns:{
                provisional:[
                    {field:"id",title:"ID",edit:"hidden"},
                    {field:"mode_id",title:"收费规则",edit: 'select',searchList: Yunqi.data.parking_mode,rules:'required'},
                    {field:"time_limit_entry",title:"限制入场",edit:{form:'radio',value:'0'},searchList:{'0':"否",'1':"是"}},
                    {field:"time_limit_setting",title:"限制时间",edit:{form:'slot',value:[{period_begin:'08:00',period_end:'12:00'}]},visible:function (row){
                        return row.time_limit_entry==='1';
                    }},
                    {field:"weigh",title:"权重",edit:"number"},
                    {field:"status",title:"状态",edit: {form:'radio',value:'normal'},searchList:{normal:"正常",hidden:"隐藏"}},
                ],
                monthly:[
                    {field:"id",title:"ID",edit:"hidden"},
                    {field:"title",tab:0,title:"月卡名称",edit:"text",rules:'required'},
                    {field:"mode",tab:0,title:"收费规则",edit: 'slot'},
                    {field:"fee",tab:0,title:"月租金额",edit: {form:'input',type:'number',append:'元'},rules:'required;range(0~)'},
                    {field:"expire_day",tab:0,title:"过期宽限期",edit: {form:'input',type:'number',value:0,append:'天'},rules:'required;integer(+0)'},
                    {field:"notice",tab:0,title:"到期提前通知",edit: {form:'input',type:'number',value:3,append:'天'},rules:'required;integer;range(1~7)'},
                    {field:"remark_list",tab:0,title:"添加备注资料",edit:'slot'},
                    {field:"status",tab:0,title:"状态",edit: {form:'radio',value:'normal'},searchList:{normal:"正常",hidden:"隐藏"}},
                    {field:"online_apply",tab:1,title:"线上申请月卡",edit:{form: 'select',value:'no'},searchList:{'yes':"支持",'no':"不支持"}},
                    {field:"min_month",tab:1,title:"最小起租月数",visible:function(row){return row.online_apply=='yes'},edit: {form:'input',type:'number',append:'月',value: 1},rules:'integer(+)'},
                    {field:"max_month",tab:1,title:"最大起租月数",visible:function(row){return row.online_apply=='yes'},edit: {form:'input',type:'number',append:'月',value: 12},rules:'integer(+)'},
                    {field:"auto_online_apply",tab:1,title:"审核申请月卡",visible:function(row){return row.online_apply=='yes'},edit:{form: 'select',value:'yes'},searchList:{'yes':"自动审核",'no':"人工审核"}},
                    {field:"online_apply_remark",tab:1,title:"申请月卡备注",visible:function(row){return row.online_apply=='yes' && row.auto_online_apply=='no'},edit:'slot'},
                    {field:"online_recharge",tab:2,title:"支持在线续租",edit:{form: 'select',value:'yes'},searchList:{'yes':"支持",'no':"不支持"}},
                    {field:"min_renew",tab:2,title:"最小续租月数",edit: {form:'input',type:'number',append:'月',value: 1},rules:'integer(+)',visible:function(row){return row.online_recharge=='yes'}},
                    {field:"max_renew",tab:2,title:"最大续租月数",edit: {form:'input',type:'number',append:'月',value: 12},rules:'integer(+)',visible:function(row){return row.online_recharge=='yes'}},
                    {field:"renew_limit_day",tab:2,title:"续租宽限天数",edit: {form:'input',type:'number',value:7,append:'天'},rules:'integer(+0)',visible:function(row){return row.online_recharge=='yes'}},
                    {field:"online_renew",tab:3,title:"过期申请续租",edit:{form: 'select',value:'no'},searchList:{'yes':"支持",'no':"不支持"}},
                    {field:"auto_online_renew",tab:3,title:"审核过期续租",visible:function(row){return row.online_renew=='yes'},edit:{form: 'select',value:'yes'},searchList:{'yes':"自动审核",'no':"人工审核"}},
                    {field:"online_renew_remark",tab:3,title:"过期续租备注",visible:function(row){return row.online_renew=='yes' && row.auto_online_renew=='no'},edit:'slot'},
                ],
                day:[
                    {field:"id",title:"ID",edit:"hidden"},
                    {field:"title",tab:0,title:"日租卡名称",edit:"text",rules:'required'},
                    {field:"mode",tab:0,title:"收费规则",edit: 'slot'},
                    {field:"remark_list",tab:0,title:"添加备注资料",edit:'slot'},
                    {field:"status",tab:0,title:"状态",edit: {form:'radio',value:'normal'},searchList:{normal:"正常",hidden:"隐藏"}},
                    {field:"online_apply",tab:1,title:"线上申请日租卡",edit:{form: 'select',value:'yes'},searchList:{'yes':"支持",'no':"不支持"}},
                    {field:"auto_online_apply",tab:1,title:"审核申请日租卡",visible:function(row){return row.online_apply=='yes'},edit:{form: 'select',value:'yes'},searchList:{'yes':"自动审核",'no':"人工审核"}},
                    {field:"online_apply_days",tab:1,title:"日租卡有效期",visible:function(row){return row.online_apply=='yes'},edit:{form:'input',type:'number',append:'天'}},
                    {field:"online_apply_remark",tab:1,title:"申请日租卡备注",visible:function(row){return row.online_apply=='yes' && row.auto_online_apply=='no'},edit:'slot'},
                    {field:"online_renew",tab:2,title:"过期申请续卡",edit:{form: 'select',value:'yes'},searchList:{'yes':"支持",'no':"不支持"}},
                    {field:"auto_online_renew",tab:2,title:"审核过期续卡",visible:function(row){return row.online_renew=='yes'},edit:{form: 'select',value:'yes'},searchList:{'yes':"自动审核",'no':"人工审核"}},
                    {field:"online_renew_days",tab:2,title:"续卡有效期",visible:function(row){return row.online_renew=='yes'},edit:{form:'input',type:'number',append:'天'}},
                    {field:"online_renew_remark",tab:2,title:"过期续卡备注",visible:function(row){return row.online_renew=='yes' && row.auto_online_renew=='no'},edit:'slot'},
                ],
                member:[
                    {field:"id",title:"ID",edit:"hidden"},
                    {field:"title",title:"会员卡名称",edit:"text",rules:'required'},
                    {field:"mode",title:"收费规则",edit: 'slot'},
                    {field:"discount",title:"会员折扣",edit: {form:'input',type:'number',append:'折',placeholder:'输入0到10之间的数字，0为免费，10为不打折'},rules:'required,range(0~10)'},
                    {field:"remark_list",title:"添加备注资料",edit:'slot'},
                    {field:"status",title:"状态",edit: {form:'radio',value:'normal'},searchList:{normal:"正常",hidden:"隐藏"}},
                ],
                stored:[
                    {field:"id",title:"ID",edit:"hidden"},
                    {field:"title",tab:0,title:"储值卡名称",edit:"text",rules:'required'},
                    {field:"mode",tab:0,title:"收费规则",edit: 'slot'},
                    {field:"min_stored",tab:0,title:"单次最小充值",edit: {form:'input',type:'number',append:'元'},rules:'required;integer(+)'},
                    {field:"gifts",tab:0,title:"充值赠送",edit:'slot'},
                    {field:"remark_list",tab:0,title:"添加备注资料",edit:'slot'},
                    {field:"status",tab:0,title:"状态",edit: {form:'radio',value:'normal'},searchList:{normal:"正常",hidden:"隐藏"}},
                    {field:"online_apply",tab:1,title:"线上申请储值卡",edit:{form: 'select',value:'yes'},searchList:{'yes':"支持",'no':"不支持"}},
                    {field:"online_apply_days",tab:1,title:"储值卡有效期",visible:function(row){return row.online_apply=='yes'},edit:{form:'input',type:'number',append:'天'}},
                    {field:"auto_online_apply",tab:1,title:"审核申请储值卡",visible:function(row){return row.online_apply=='yes'},edit:{form: 'select',value:'yes'},searchList:{'yes':"自动审核",'no':"人工审核"}},
                    {field:"online_apply_remark",tab:1,title:"申请储值卡备注",visible:function(row){return row.auto_online_apply=='no'},edit:'slot'},
                ],
                vip:[
                    {field:"id",title:"ID",edit:"hidden"},
                    {field:"title",title:"VIP名称",edit:"text",rules:'required'},
                    {field:"mode",title:"收费规则",edit: 'slot'},
                    {field:"remark_list",title:"添加备注资料",edit:'slot'},
                    {field:"status",title:"状态",edit: {form:'radio',value:'normal'},searchList:{normal:"正常",hidden:"隐藏"}}
                ]
            },
            row:Yunqi.data.row || {mode:[],remark_list:null,online_apply_remark:[{remark:'业主房号'}],online_renew_remark:[{remark:'业主房号'}]},
        },
        methods: {
            changeMode:function (e){
                this.$refs.yunForm.setValue('mode',e);
            },
            changeRenewRemark:function (e){
                this.$refs.yunForm.setValue('online_renew_remark',e);
            },
            changeRemarkList:function (e){
                this.$refs.yunForm.setValue('remark_list',e);
            },
            changeMonthRemark:function (e){
                this.$refs.yunForm.setValue('online_apply_remark',e);
            },
            changeGifts:function (e){
                this.$refs.yunForm.setValue('gifts',e);
            },
            changePeriod:function (e){
                this.$refs.yunForm.setValue('time_limit_setting',e);
            }
        }
    }
</script>
<style>
</style>